<!--  -->
<template>
   <div class='addressList'>
        <header-login @logn="loginTip"></header-login>
        <bread-nav><span slot="name">AddressList</span></bread-nav>
        <!-- <div class="check-step">
            <ul class="clearfix">
                <li class="cur">
                    <span>Config</span>
                    <i>address</i>
                </li>
                <li>
                    <span>Config</span>
                    <i>address</i>
                </li>
                 <li>
                    <span>Config</span>
                    <i>address</i>
                </li>
                <li>
                    <span>Config</span>
                    <i>address</i>
                </li>
            </ul>
        </div> -->
        <check-step num="1"></check-step>
        <div class="page-title-normal checkout-title">
            <h3>Shipping address</h3>
        </div>
        <div class="addr-list-wrap">
            <div class="addr-list">
                <ul class="clearfix">
                    <li v-for="(v,index) in addressListFilter" :key="index" :class="{'check':index==curIndex}" @click="curIndex=index;addressId=v.addressId">
                        <dl>
                            <dt>{{v.userName}}</dt>
                            <dd class="address">{{v.streetName}}</dd>
                            <dd class="tel">{{v.tel}}</dd>
                        </dl>
                        <div class="addre-del" @click="delAddress(v.addressId)">
                            <span class="iconfont icon-laji laji"></span>
                        </div>
                        <div class="sezhi">
                           <a href="javascript:viod(0);" v-if="!(v.isDefault)" @click.stop.prevent="setDefault(v.addressId)">设置为默认地址</a>
                           <span v-else-if="v.isDefault">默认地址</span>
                        </div>
                    </li>
                    <router-link to="/newaddress">
                        <li class="addre-new">
                            <div class="icon-div">
                                <span class="iconfont icon-jiahao jia"></span>
                            </div>
                            <div>
                                new bulid Address
                            </div>
                        </li>
                    </router-link>
                </ul>
            </div>
        </div>
        <div class="more-wapprer">
            <div class="pointer" @click="expand">
               <strong v-show="autoLenth">more</strong> <span class="iconfont" :class="autoLenth?'icon-moreinfo':'icon-less'"></span>
            </div>
        </div>
        <model :model="modelTip2.type" ref="model" v-if="modelTip2.showflg">
            <span slot="title">{{modelTip2.tipText}}</span>
            <i slot="content">
                {{modelTip2.tipContent}}
            </i>
            <strong slot="btn">
                <button type="button" @click="query">确定</button>
                <button type="button" @click="hiden">取消</button>
            </strong>
        </model>
        <div class="next">
            <!-- <router-link :to="{}"></router-link> -->
            <router-link :to="{ path: '/order', query: { addressId}}">NEXT</router-link>
        </div>
        <v-footer></v-footer>
   </div>
</template>

<script>
    import HeaderLogin from '@/components/HeaderLogin'
    import BreadNav from '@/components/BreadNav'
    import footer from '@/components/footer'
    import CheckStep from '@/components/CheckStep'
    import model from '@/components/model'
    export default {
      components: {HeaderLogin,BreadNav,model,"v-footer":footer,CheckStep},
       data() {
           return {
               zd:3,
               limt:3,
               cartList:[],
               curIndex:0,
               addressId:"",
               orderId:100349909,
               modelTip2:{
                   tipText:"",
                   tipContent:"",
                   type:"",
                   showflg:false
               },
               delAddressId:null,
           };
       },
       computed: {
           addressListFilter(){
               return this.cartList.slice(0,this.limt)
           },
           autoLenth(){
               if(this.cartList.length<= this.limt){
                   return false;
               }else if(this.cartList.length>this.limt){
                   return true;
               }
           }
       },
       watch: {},
       methods: {
           fztip2(a,b,c,d){
                this.modelTip2.tipText = a;
                this.modelTip2.tipContent = b;
                this.modelTip2.type = c;
           },
           hiden(){
              this.fztip2("","","");
              this.modelTip2.showflg = false;
              this.delAddressId = null;
           },
           loginTip(param){
               switch (param.res) {
                   case "success":
                       this.fztip("正确",`${param.type}成功`,"success");
                       break;
                    case "err":
                        this.fztip("错误",param.type+"失败,请重新登录","err");
                        break;
                    case "tip":
                        this.fztip("警告",param.type,"tip");
                        break;
                    case "question":
                        this.fztip("问题",param.type,"question");
                        break;
                   default:
                       break;
               }
               this.modelTip.showflg = true;
            //   this.$refs.model.show();
           },
            initList(){
                let _this = this;
                axios.get('/address/addressList', {
                    params: {
                    }
                })
                .then(function (response) {
                    let {data,msg,errno} = response.data;
                    if(!errno){
                        _this.cartList = data;
                        let index = data.findIndex(ele => {
                           return ele.isDefault == true
                        })
                        _this.addressId = data[index].addressId;
                        _this.curIndex = index;
                    }else{
                        console.log(msg)
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            setDefault(param){
                let _this = this;
                let oldId = null;
                this.cartList.forEach(element => {
                    if(element.isDefault){
                        oldId = element.addressId
                    }
                });
                axios.post('/address/setaddress', {
                    addressId: param,
                    oldId
                })
                .then(function (response) {
                    let {data,msg,errno} = response.data;
                    if(!errno){
                        _this.initList();
                    }
                    else{
                        console.log(msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            expand(){
                if(this.limt <= this.zd){
                    this.limt = (+this.cartList.length);
                }
                else{
                    this.limt = this.zd;
                }
            },
            delAddress(param){
                this.modelTip2.showflg = true;
                this.delAddressId = param;
                this.fztip2("提示","确定删除地址？","tip");
            },
            query(){
                let _this = this;
                axios.post('/address/delAddress', {
                    addressId:_this.delAddressId
                })
                .then(function (response) {
                    let {data,msg,errno} = response.data;
                    if(!errno){
                        _this.initList();
                        _this.hiden()
                    }
                    else{
                        console.log(msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
       },
       created() {
           this.initList();
       },
       mounted() {

       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
    zoom:1;
}
.addressList{
    // .check-step{
    //     width:85%;
    //     margin: 0 auto;
    //     ul{
    //         display: flex;
    //         li{
    //             span,i{
    //                 text-transform:capitalize;
    //             }
    //             &.cur{   
    //                 border-color: #d1434a;
    //                 color: #d1434a;
    //                 &:after{
    //                     color:#d1434a;
    //                     background-color:#d1434a;
    //                 }
    //             }
    //             flex:1;
    //             width: 25%;
    //             float: left;
    //             border-bottom: 2px solid #ccc;
    //             color:#ccc;
    //             text-align: center;
    //             line-height: 1.25em;
    //             padding: 0 1em 1.25em 0;
    //             position: relative;
    //             &:after{
    //                 content:"";
    //                 display:block;
    //                 position: absolute;
    //                 bottom: -8px;
    //                 left:50%;
    //                 width:15px;
    //                 height: 15px;
    //                 border-radius: 50%;
    //                 color:#ccc;
    //                 background-color: #ccc;
    //                 -webkit-transform: translate(-50%,0);
    //                 -moz-transform:translate(-50%,0);
    //                 transform: translate(-50%,0);
    //             }
                
    //         }
    //     }
    // }
    .page-title-normal{
        font-family: "moderat", sans-serif;
        color: #333;
        width:85%;
        margin: 10px auto;
        h3{
            padding: 20px 0;
            font-size: 16px;
            color: #605F5F;
            text-transform: uppercase;
            letter-spacing: .25em;
            font-weight: bold;
        }
    }
    .addr-list-wrap{
        .addr-list{
            width:87%;
            margin: 0 auto;
            ul{
                li{
                    position: relative;
                    float: left;
                    width: 23.8095%;
                    height: 162px;
                    margin: 0 1.187% 1.187% 0;
                    padding: 20px 20px 40px 20px;
                    background: #fff;
                    border: 2px solid #e9e9e9;
                    overflow: hidden;
                    cursor: pointer;
                    color: #333;
                    &.check{
                      border-color: #ee7a23;
                    }
                    // &:hover{
                    //     border-color: #ee7a23;
                    // }
                    .addre-del{
                        position:absolute;
                        right: 15px;
                        bottom: 13px;
                        font-size: 15px;
                        .aj{font-size:15px;cursor: pointer;}
                    }
                    dl{
                        font-size: 15px;
                        dt{
                            line-height: 28px;
                        }
                        dd{
                            &.tel{
                                margin-top:35px;
                            }
                        }
                    }
                    &.addre-new{
                        &:hover{
                            border-color: #ee7a23;
                        }
                        color: #605F5F;
                        text-align: center;
                        .icon-div{
                            padding-top:20px;
                            margin-bottom: 15px;
                            .jia{
                                font-size:45px;
                            }
                        }
                    }
                    .sezhi{
                        font-size:15px;
                        a{color: #d1434a;font-weight: bold}
                    }
                }
            }
        }
    }
    .more-wapprer{
        display: flex;
        justify-content: center;
        align-items: center;
        .pointer{
            display: flex;
            justify-content: center;
            align-items: center; 
            strong{margin-right: 5px; }
            span{
                &.iconfont{
                    font-size:30px;
                }
            }
        }
    }
    .next{
        width:100px;
        margin-left:auto;
        margin-right:100px;
        a{display: inline-block;padding: 20px 30px;text-align: center;background-color: #d1434a;color:#fff;}
    }
}
</style>